<template>
  <q-header class="doc-header header-toolbar doc-brand" :class="docStore.state.value.是主页 ? '主页时头部' : ''" bordered :height-hint="51">
    <!-- <q-header :class="['header', $q.dark.isActive ? '' : 'text-dark']" bordered > -->
    <q-toolbar class="q-pl-lg q-pr-md no-wrap  VPNavBarTitle">
      <div 没有我容不下图片>
        <a :href="normalizeLink('/')" :target="void 0" class="doc-header__logo row items-center no-wrap cursor-pointer title">
            <img class="VPImage 无界 logo" src="icons/amtf-ml128.png" alt="amtf logo2"  @click="添加涟漪"/>
        </a>
      </div>

      <!-- 顶部折叠按钮，用不到了 -->
      <!-- <q-btn class="q-mx-sm" flat dense round @click="docStore.toggleMenuDrawer" aria-label="Menu" icon="menu"></q-btn> -->
      
      <!-- <div class="doc-header__primary-left-spacer gt-lg" /> -->
      <!-- <doc-header-text-links class="doc-header__links col text-size-16 gt-700" :menu="primaryToolbarLinks" mq-prefix="gt"
        nav-class=" text-size-16 " /> -->
        <q-space />


      <div class="doc-header__links col row items-center no-wrap">
        <doc-header-text-links
          :menu="导航栏"
          nav-class="text-size-14 letter-spacing-100"
          mq-prefix="gt"
        />
        

      </div>

      <q-btn class="header-btn" type="a" flat round :icon="主题图标" @click="docStore.toggleDark" />
    </q-toolbar>

  </q-header>
</template>

<script setup>
import { normalizeLink } from '../../support/utils'
import DocHeaderTextLinks from './DocHeaderTextLinks.vue'

import { computed } from "vue";
import { mdiCompare, mdiFolderPound } from "@quasar/extras/mdi-v6";
// import 导航栏 from './导航栏.js'
import { useData } from 'vitepress'
const { theme } = useData()
const 导航栏=theme.value.nav

import { 添加涟漪 } from '../../utils/amtf'

import { useDocStore } from "../store/index.js";
import { fasMoon } from "@quasar/extras/fontawesome-v6";
import { matWbSunny } from "@quasar/extras/material-icons";
const 主题图标 = computed(() =>
  docStore.$q.dark.isActive === false ? matWbSunny : fasMoon
);
const docStore = useDocStore();

// const logo = computed(() => {
//   const opt = docStore.$q.dark.isActive === true ? '-dark' : ''
//   return {
//     img: `/erpnext-biji/icons/amtf-ml128.png`,
//     // text: `https://cdn.quasar.dev/logo-v2/svg/logotype${opt}.svg`
//     text: `https://cdn.quasar.dev/logo-v2/svg/logotype${opt}.svg`
//   }
// })
const showThemeChanger = computed(() => docStore.$route.meta.dark !== true);
const hasToc = computed(
  () =>
    docStore.$route.meta.fullwidth !== true &&
    docStore.$route.meta.fullscreen !== true &&
    docStore.state.value.toc.length !== 0
);

</script>
<style scoped>
.主页时头部{
  background: transparent !important;
  border-bottom: none;
}

</style>
<style lang="sass">
@import "@the/css/app.sass"

.doc-header
  transition: none

  &__primary
    height: 72px
    border-bottom: 1px solid $separator-color

  &__secondary
    height: 55px


  &__logo-img
    border-radius: 50%

    &:hover
      // !important needed when used with flat cards
      box-shadow: 0 6px 6px 0 rgba($brand-primary, 0.28) !important
      transform: scale(1.03)

  &__logo
    padding-right: 24px

    &:hover
      // box-shadow: 0 8px 8px 0 rgba($dark, 0.2) !important
      // transform: scale(1.03)

  &__version
    color: #000
    border: 1px solid $brand-primary
    transition: none
    .q-focus-helper
      color: $brand-primary

  &__leftmost
    margin-left: -8px

  /**
    Spacers are used to align the links dead center
   */
  &__primary-left-spacer
    width: 198px
  &__secondary-left-spacer
    width: 296px

  @media (max-width: 320px)
    .q-btn
      font-size: 12px
    .q-btn--rectangle
      padding: 8px 2px 8px 10px !important

  @media (max-width: 1059px)
    &__logo-text
      display: none

  @media (max-width: 699px)
    .q-toolbar
      padding-left: 16px
      padding-right: 8px
    &__logo
      padding-right: 16px
    .doc-search
      width: 100%
  @media (min-width: 700px)
    .doc-search
      margin-left: 8px
      .doc-search__logo
        display: none

  &__links
    justify-content: end
    @media (min-width: 1921px)
      justify-content: center

.doc-header-menu
  letter-spacing: $letter-spacing-brand
  border: 1px solid $separator-color
  font-size: ($font-size - 2px)
  box-shadow: none !important
  background-color: #fff

  .q-item
    height: 36px

  .q-item__label--header
    color: $brand-accent
    padding: 16px
    &:first-child
      padding-top: 8px
  .q-item__section--side .q-icon
    color: $brand-primary

  &__arrow
    margin-right: -8px

.doc-header-text-links__item
  .q-icon
    margin-left: 0

body.body--dark
  .doc-header__primary
    border-bottom-color: $separator-dark-color
  .doc-header-menu
    background: $dark-bg
    border-color: $separator-dark-color

  .doc-header
    &__version
      color: #fff

  .doc-header-icon-links
    color: $brand-primary

$mq-list: 510, 600, 750, 860, 910, 1000, 1060, 1130, 1190, 1300 /* drawer */, 1310, 1400
@each $query in $mq-list
  @media (min-width: #{$query}px)
    .lt-#{$query}
      display: none

  @media (max-width: #{$query - 1}px)
    .gt-#{$query}
      display: none
</style>
